<!DOCTYPE html>
<html>
	<head>
		<title>Home</title>
		<!--bootstarp-css-->
		<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
		<!--/bootstarp-css -->
		<!--css-->
		<link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />
		<link href="../css/hover.css" rel="stylesheet" media="all">
		<!--/css-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Petcare Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
		<script type="text/javascript"
			src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=SgoW5AbGKRdxnBga6gmIVWQZYXquhuSE"></script>
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>

		<script src="../js/jquery.min.js"></script>
		<script src="../js/modernizr.custom.js"></script>
		<script src="../js/responsiveslides.min.js"></script>
		<script>
			// You can also use "$(window).load(function() {"
			$(function() {
				$("#slider2").responsiveSlides({
					auto: true,
					pager: true,
					speed: 300,
					namespace: "callbacks",
				});
			});
		</script>
		<style>
			.jiyang-list a,
			.jiyang-list a:hover {
				color: #0c8687;
				font-size: 14px;
				text-decoration: none;
			}

			.pagination>.active>a,
			.pagination>.active>span,
			.pagination>.active>a:hover,
			.pagination>.active>span:hover,
			.pagination>.active>a:focus,
			.pagination>.active>span:focus {
				z-index: 3;
				color: #fff;
				cursor: default;
				background-color: #0c8687;
				border-color: #0c8687;
			}

			.pagination>li>a {
				color: rgb(187, 187, 187);
			}

			#yincan {
				width: 160px;
				height: 110px;
				position: absolute;
				top: 70px;
				right: 46px;
				background-color: #fff;
				display: none;
			}

			.media-list li {
				margin: 5px;
				background-color: #f5f5f5d9;
			}

			.media-list .address {
				color: #bbb;
				font-size: 12px;
			}

			.media-list .media-heading {
				color: #666;
			}

			.pet-type {
				color: #ff6735;
				border-bottom: 2px solid #ff6735;
				border-radius: 0;
				font-size: 13px;
				margin: 0 5px;
			}

			.pull-right {
				font-size: 12px;
				color: #EF9070;
			}

			.jiyang-list .price {
				font-size: 20px;
				font-weight: bolder;
				color: #EF9070;
			}

			.media-body {
				line-height: 30px;
			}

			.pagination input {
				outline: none;
				border-radius: 4px;
				width: 50px;
				height: 36px;
				outline: none;
				border: 1px #DDDDDD solid;
				text-align: center;
			}

			#go-page {
				border: 1px #0c8687 solid;
				color: #fff;
				background: #0c8687;
			}
		</style>
	</head>
	<body>
		<!--header-->
		<div class="header">
			<div class="header-info">
				<div class="container">
					<div class="logo">
						<a href="index.html"><img src="../images/logo-pet.png" style="position: absolute;width: 330px;height: 262px;top: -60px;left: 280px;"/></a>
					</div>
					<div class="search-box">
						<form>
							<input type="text" name="s" class="textbox" placeholder="Search" required="">
							<input type="submit" value="">
						</form>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="header-bottom">
				<div class="menu">
					<span class="menu-info"> </span>
					<ul class="cl-effect-21">
						<li id="oneser"><a id="service" href="index.html" class="active">服务中心</a>
							<div id="yican">
								<div>
									<p><a href="adopt.html">宠物领养</a></p>
									<p><a href="farmed.html">宠物寄养</a></p>
									<p><a href="notice.html">寻宠|招领</a></p>
								</div>
							</div>
						</li>
						<li><a href="petbaike.html">宠物百科</a></li>
						<li><a href="news.html">宠物新闻</a></li>
						<li><a href="bbs.html">宠物论坛</a></li>
						<li><a>关于我们</a></li>
						<li id="twoser">
							<a id="myme">个人中心</a>
							<div id="yincan">
								<div>
									<p><a href="myinfo.html">我的</a></p>
									<p><a id="overpet">注销</a></p>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<!--script-nav -->
				<script>
					$("span.menu-info").click(function() {
						$("ul.cl-effect-21").slideToggle("slow", function() {});
					});
				</script>
				<!-- /script-nav -->
				<div class="clearfix"> </div>
			</div>
		</div>

		<div>
			<div class="jiyang-list" id="jiyang-list" style="width: 970px;margin: 60px auto 0;">
				<div class="pin-wrapper" style="height: 41px;">
					<form onsubmit="return false" name="search-form" id="search-top" style="width: 848px;">
						<div class="input-group search-panel">
							<input type="text" name="k" id="autocomplete" class="form-control" placeholder="输入地区名或关键词"
								value="" autocomplete="off">
							<div id="selection"></div>
							<span class="input-group-btn">
								<button class="btn btn-default" id="search-button" type="submit"
									style="outline: none;"><i class="fa fa-search"></i><span class="hidden-xs">
										搜索</span></button>
							</span>

						</div>
					</form>
				</div>

				<ul class="media-list" style="margin-top: 10px">
					<li class="media jy-cell-con" style="position: relative" data-lastdis="">
						<div class="pull-left">
							<a href="farmeedAdd.html"><img src="../images/pic8.jpg" width="100px"
									alt="谷德道格宠物会所宠物寄养"></a>
						</div>
						<div class="media-body">
							<h4 class="media-heading"><a href="farmeedAdd.html">谷德道格宠物会所</a></h4>
							<div class="address"><a class="address-shop">北京市朝阳区西大望路19号院金港国际9号楼底商</a></div>
							<div class="visible-xs clearfix" style="padding: 5px 0 0 10px;">
								<div class="pull-left"> ￥<span class="price">40</span> 起</div>
							</div>
							<div class="jiyang-type hidden-xs">
								<span class="pet-type">狗</span>
								<span class="pet-type">猫</span>
								<div class="pull-right hidden-xs">
									寄养价格：<span class="price">40</span> 起 <span class="price_unit">/天</span>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="clearfix">
				<!--<div class="text-right"><button class="btn btn-danger actionLoadMore" data-type="" >加载更多...</button></div>-->


				<div class="text-center hidden-xs">
					<ul class="pagination">
						<li class="active"><a href="javascript:void(0)" id="firstpage" title="首页">首页</a></li>
						<li><a href="javascript:void(0)" id="prevpage" title="上一页">上一页</a></li>
						<li><a href="javascript:void(0)" id="nextpage" title="下一页">下一页</a></li>
						<li><a href="javascript:void(0)" id="lastpage" title="最后一页">尾页</a></li>
						<li style="margin-left: 20px;">第<input type="text" id="pagenum" value="1" />页
							<input type="button" value="GO" id="go-page" style="" />
						</li>
					</ul>

				</div>
			</div>
		</div>

		<!--/header-->

		<!--footer-->
		<div class="footer">
			<div class="container">
				<div class="copy-rights">
					<p>Copyright &copy; 2023.Company <a target="_blank" href="index.html">you宠</a></p>
				</div>

			</div>
		</div>
		<!--/footer-->
		<!-- 分页样式 -->
		<script>
			$(function() {
				$(".pagination li").click(function() {
					$(this).children("a").css("color", "#fff");
					$(this).children("a").css("cursor", "default");
					$(this).children("a").css("background-color", "#0c8687");
					$(this).children("a").css("border-color", "#0c8687");
					$(this).siblings().children("a").css("color", "#bbb");
					$(this).siblings().children("a").css("cursor", "default");
					$(this).siblings().children("a").css("background-color", "#fff");
					$(this).siblings().children("a").css("border-color", "#ddd");
				})
			})
		</script>
		<!--yican -->
		<script>
			$("#service").mouseenter(function() {
				$("#yican").css("display", "block");
			});
			$("#oneser").mouseleave(function() {
				$("#yican").css("display", "none");
			});
			$("#myme").mouseenter(function() {
				$("#yincan").css("display", "block");
			});
			$("#twoser").mouseleave(function() {
				$("#yincan").css("display", "none");
			});
			//注销
			$("#overpet").click(function() {
				if (!confirm('是否确定注销该用户并退出登录？'))
					return;
				$.post('http://localhost:80/ct/remove', function(res) {
					if (res) {
						location.href = 'login.html';
					}
				});
			})
		</script>
		<!-- /yican -->
		<script type="text/javascript">
			$(function() {				
				uporderstu();
				//修改订单状态
				function uporderstu(){
					let temp = new URLSearchParams(location.search);
					let orderid = temp.get("out_trade_no"); //订单编号
					if(orderid != null){
						$.post('http://localhost:80/ct/uporderstu',{"orderid":orderid},function(res){									
							if(res){			
								$.post('http://localhost:80/ct/orderdetail2',{"orderid":orderid},function(r){
									let upids = r.upids;
									//订单支付成功即释放宠物状态
									$.post('http://localhost:80/ct/updatestatus2',{"upids":upids},function(res){},"json");																
								},"json");			
							}
						},"json");						
					}
				}										
				let index = 1;
				let pages = 1;
				$("#search-button").click(function() {	
					index = 1;
					$("#pagenum").val(1);
					petshopAll();
					$("#autocomplete").val("");
				})
				//前往第几页
				$("#go-page").click(function() {
					let pagenum = $("#pagenum").val();
					if (pagenum > 0) {
						index = pagenum;
					}
					if (pagenum == 0) {
						alert("输入页码需大于0！");
						$("#pagenum").val(1);
						index = 1;
					}
					if (pagenum > pages) {
						alert("输入页码大于最大页数！");
						$("#pagenum").val(1);
						index = 1;
					}
					petshopAll();
				})
				//首页
				$("#firstpage").click(function() {
					index = 1;
					$("#pagenum").val(1);
					petshopAll();
				})
				//尾页
				$("#lastpage").click(function() {
					$("#pagenum").val(pages);
					index = pages;
					petshopAll();
				})
				//上一页
				$("#prevpage").click(function() {
					if (index >= 2) {
						index = index - 1;
						$("#pagenum").val(index);
					} else {
						alert("当前已是第一页！");
					}
					petshopAll();
				})
				//下一页
				$("#nextpage").click(function() {
					if (index < pages) {
						index = index + 1;
						$("#pagenum3").val(index);
					} else {
						alert("当前已是最后一页！");
					}
					petshopAll();
				})

				petshopAll();
				function petshopAll() {
					$(".media-list").children().remove();
					$.post('http://localhost:80/ct/petshopAll', {
						"index": index,
						"address": $("#autocomplete").val()
					}, function(r) {
						$(r.records).each(function(i, e) {
							let lis = "<li class='media jy-cell-con' style='position: relative;'>" +
								"<div class='pull-left'>" +
								"<a href='farmeedAdd.html?psid="+e.psid+"&price="+e.minprice+"'><img src = '../images/"+e.psfile+"' width = '100px' alt = '谷德道格宠物会所宠物寄养' ></a>"+
							"</div>" +
							"<div class='media-body'>" +
							"<h4 class='media-heading'><a href='farmeedAdd.html?psid="+e.psid+"&price="+e.minprice+"'>"+e.psname+"</a></h4>" +
							"<div class='address'><a class='address-shop'>"+e.psaddress+"</a></div>" +
							"<div class='jiyang-type hidden-xs'>" +
							"<span class='pet-type'>狗</span>" +
							"<span class='pet-type'>猫</span>" +
							"<div class='pull-right hidden-xs'>寄养价格：<span class='price'>"+e.minprice+"</span> 起 <span class='price_unit'>/天</span></div>" +
							"</div>" +
							"</div>" +
							"</li>";
							$(".media-list").append(lis);
						})
						pages = r.pages;
					}, "json");
				}
			})
		</script>



		<style>
			#pet-map {
				width: 60%;
				position: absolute;
				top: 23%;
				left: 20%;
				z-index: 1199;
				background-color: #fff;
				visibility: hidden;
				opacity: 0;
			}

			#l-map {
				height: 800px;
				width: 100%;
				float: left;
				border: 2px #ddd solid;
			}

			#r-result,
			#searchResultPanel {
				width: 40%;
				height: 50px;
				float: right;
				line-height: 50px;
				font-size: 18px;
				position: absolute;
				top: 0%;
				right: 0%;
				z-index: 1200;
			}

			#r-result input {
				border: 1px #ddd solid;
				border-radius: 5px;
			}

			#container-map {
				height: 800px;
				width: 100%;
			}

			#tangram-suggestion--TANGRAM__1-main {
				z-index: 999;
			}

			/* .default {
				outline: none;
			} */
		</style>
		<div id="pet-map">
			<!-- <div id="container-map"></div> -->
			<div id="l-map"></div>
			<div id="r-result">
				<input type="text" id="suggestId" size="20" value="百度" style="width:200px;outline:none;height: 20px;" />
				<button class="default btn btn-danger" style="outline: none;">返回</button>
			</div>
			<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
		</div>
		<script>
			$(function() {
				//加载搜索框
				$("#r-result input").attr("style", "width: 240px;height: 30px;outline:none");

				$(".address-shop").click(function() {
					$("#pet-map").css("opacity", "1");
					$("#pet-map").css("visibility", "visible");
					$("#backdrop").css("visibility", "visible");
					$("#backdrop").css("opacity", "1");
				})
				$(".default").click(function() {
					$("#pet-map").css("opacity", "0");
					$("#pet-map").css("visibility", "hidden");
					$("#backdrop").css("visibility", "hidden");
					$("#backdrop").css("opacity", "0");
				})

				$(".address-shop").click(function() {
					function G(id) {
						return document.getElementById(id);
					}
					var map = new BMapGL.Map("l-map");

					//当前城市	
					map.centerAndZoom($(this).text(), 12); // 初始化地图,设置城市和地图级别。

					map.enableScrollWheelZoom(true);
					var ac = new BMapGL.Autocomplete( //建立一个自动完成的对象
						{
							"input": "suggestId",
							"location": map
						});

					ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
						var str = "";
						var _value = e.fromitem.value;
						var value = "";
						if (e.fromitem.index > -1) {
							value = _value.province + _value.city + _value.district + _value.street +
								_value.business;
						}
						str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

						value = "";
						if (e.toitem.index > -1) {
							_value = e.toitem.value;
							value = _value.province + _value.city + _value.district + _value.street +
								_value.business;
						}
						str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
						G("searchResultPanel").innerHTML = str;
					});

					var myValue;
					ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
						var _value = e.item.value;
						myValue = _value.province + _value.city + _value.district + _value.street +
							_value.business;
						G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index +
							"<br />myValue = " +
							myValue;

						setPlace();
					});

					function setPlace() {
						map.clearOverlays(); //清除地图上所有覆盖物
						function myFun() {
							var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
							map.centerAndZoom(pp, 18);
							map.addOverlay(new BMapGL.Marker(pp)); //添加标注
						}
						var local = new BMapGL.LocalSearch(map, { //智能搜索
							onSearchComplete: myFun
						});
						local.search(myValue);
					}

				})

			})
		</script>

	</body>
</html>